<template>
    <ul class="tab">
         <child-tab title="收藏" mark="myfav" @res="getMark" :sel="select"><i class="glyphicon glyphicon-book"></i></child-tab>
         <child-tab title="图书馆" mark="post" @res="getMark" :sel="select"><i class="glyphicon glyphicon-th-list"></i></child-tab>
         <child-tab title="发现" mark="find" @res="getMark" :sel="select"><i class="glyphicon glyphicon-search"></i></child-tab>
         <child-tab title="我的" mark="about" @res="getMark" :sel="select"><i class="glyphicon glyphicon-user"></i></child-tab>
    </ul>

</template>

<script>

    import ChildTab from "./ChildTab";

    export default {
        components: {ChildTab},
        name: "parent-tab",
        data(){
            return {select:"post"}
        },
        methods:{

            getMark(mark){
               this.select=mark;
            }

        }
    }
</script>

<style scoped>

.router-link-active{
    color:green;
}

.tab{
    height: 1.2rem;
    position: fixed;
    left:0;
    bottom:0;
    width:100%;
    border-top: 1px gray solid;
    background-color: #fff;
}

.tab li{
    width:25%;
    height: 1.2rem;
    float: left;
    border-right: 1px gray solid;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
}

.tab li i{
    font-size:22px;
}

</style>